@extends('layouts.mobile_main')

@section('title', '用户须知')

@section('resources')
    @parent
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <script src="{{ env('JS_DOMAIN') }}/js/adaptation.js?v={{env('JS_VERSION')}}"></script>
    <style>
		.user_know{margin-top: 1.32rem;padding: 0.2rem 0.6rem;}
		.user_know .know_text1 p{overflow: hidden;margin: 0.1rem 0;color: #3E3E3E;}
		.user_know .know_text1 .text{font-size: 0.46rem;color: #5C3E3E;margin: 0.2rem 0;border-bottom: 0.05rem solid #EF7060;padding: 0.1rem 0;float: left;font-weight: 900;position: relative;z-index: 2;}
		.user_know .know_text1 .line{width: 100%;height: 0.03rem;background-color: #ddd;position: relative;top: -0.23rem;left: 0;z-index: 1;}
		.user_know .know_text1 .text1{font-size: 0.4rem;}
		.user_know .know_text1 .text2{font-size: 0.44rem;font-weight: 900;width: 8rem;height: 0.7rem;border: 2px solid #D6004A;line-height: 0.7rem;text-align: center;border-radius: 0.3rem;margin: 0 auto;}
		.user_know .know_text1 .text3{font-size: 0.4rem;font-weight: 900;}
		.user_know .know_text1 .text4{font-size: 0.44rem;text-align: center;color: red;}
		.user_know .know_text1 .picture{text-align: center;}
		.user_know .know_text1 img{width: 4.5rem;}
		.box{width: 8.8rem;height: 1.5rem;padding: 0.3rem;border: 1px solid #000;margin: 0.5rem auto;}
		.user_know .know_text1 .box p{overflow: hidden;width: 8.4rem;height: 1.3rem;border: 1px solid #000;margin: 0;padding: 0.1rem 0.2rem;}
		.box p span{float: left;}
		video{width: 9rem;margin: 0 0.2rem;height: 5rem;display: none;}
		.max_pic{background: rgba(0,0,0,0.5);width: 100%;position: fixed;z-index: 100;text-align: center;top: 0;display: none;}
		.max_pic img{width: 80%;}
		.user_know .know_video{position: relative;width: 9rem;height: 5rem;display: none;}
		.user_know .know_video .video_pic1{position: absolute;top: 0;left: 0.2rem;width: 9rem;}
		.user_know .know_video .video_pic2{position: absolute;top: 1.7rem;left: 3.5rem;width: 2rem;}
		.user_know .know_video input{position: absolute;top: 0;left: 0;width: 9rem;height: 5rem;opacity: 0;}
    </style>
@endsection

@section('content')
<header class="pay_sure oh" style="background-color: #fff;position: fixed;top: 0;left: 0;z-index: 10;">
	<a class="fl" href="javascript:history.go(-1);">
	    <img class="fl" src="{{env('IMAGE_DOMAIN')}}images/back_p.png?v={{env('IMAGE_VERSION')}}" alt="">
	</a>
	<span class="fl co_violet fz_48" style="margin-left: 3.2rem;">用户须知</span>
</header>
<p class="max_pic">
	<img src="{{env('IMAGE_DOMAIN')}}images/newuser1.jpg?v={{env('IMAGE_VERSION')}}" alt="">
</p>
<ul class="user_know">
	<li class="know_text1">
		<p class="text">如何翻倍</p>
		<p class="line"></p>
		<p class="text1">充值无门槛、即充即翻倍</p>
		<p class="text1">（100翻倍为200，500翻倍为1000......以此类推，金额无上限）</p>
	</li>
	<li class="know_text1">
		<p class="text">夜场活动中包括哪些实体商家</p>
		<p class="line"></p>
		<p class="text1">每天夜场活动的商家类型有：宾馆、KTV、等按房间、包厢、座位收费的实体商家，若当天21:00后有空余位置，即会在翻贝网首页提示更新，给有需要服务的用户带来实实在在的方便。</p>
	</li>
	<li class="know_text1">
		<p class="text">如何进行充值</p>
		<p class="line"></p>
		<p class="text3">充值第一步：点击"钱包"</p>
		<p class="picture"><img src="{{env('IMAGE_DOMAIN')}}images/newuser13.jpg?v={{env('IMAGE_VERSION')}}" alt=""></p>
		<p class="text3">第二步：点击"充值"</p>
		<p class="picture"><img src="{{env('IMAGE_DOMAIN')}}images/newuser7.jpg?v={{env('IMAGE_VERSION')}}" alt=""></p>
		<p class="text3">第三步：输入您要充值的金额</p>
		<p class="picture"><img src="{{env('IMAGE_DOMAIN')}}images/newuser8.jpg?v={{env('IMAGE_VERSION')}}" alt=""></p>
		<p class="text3">第四步：点击“立即充值”</p>
		<p class="picture"><img src="{{env('IMAGE_DOMAIN')}}images/newuser9.jpg?v={{env('IMAGE_VERSION')}}" alt=""></p>
	</li>
	<li class="know_text1">
		<p class="text">预告</p>
		<p class="line"></p>
		<p class="text1">翻贝网首页设有“预告”的版块，用户可提前挑选并随时关注，待关注的实体商家登上“推荐商家”时即可前往实体店消费，届时可用翻贝网的余额进行买单，享受翻倍乐趣。</p>
		<p class="picture"><img src="{{env('IMAGE_DOMAIN')}}images/newuser16.jpg?v={{env('IMAGE_VERSION')}}" alt=""></p>
	</li>
	<li class="know_text1">
		<p class="text">为什么商家都没有标注价格和线上购买功能</p>
		<p class="line"></p>
		<p class="text1">平台上不显示任何商品价格 ：为避免商品价格不实，翻贝网平台上不显示商品价格，以用户和实体店的最终议价为准，最后通过翻贝网买单。</p>
	</li>
	<li class="know_text1">
		<p class="text">为什么有的商家设有支付封顶</p>
		<p class="line"></p>
		<p class="text1">有的行业利润微薄，与翻贝网合作是希望更多的用户关注自己的品牌。翻贝网为某些行业的商家设置代付封顶，这样，不仅没给商家带来成本压力反而带来更多的新用户进店体验消费，增加收入和人气。</p>
	</li>
	<li class="know_text1">
		<p class="text">为什么有的商家设有购买数量限制</p>
		<p class="line"></p>
		<p class="text1">翻贝网不仅是使消费者的钱翻倍使用的平台，也是为商家推广、展示商品的平台，商家在让利的同时，希望同等数量的产品到达更多的用户手中，有助于商家达到复购和口碑宣传的效果。同时，设置每个ID的购买数量，也能避免行业间的不良竞争。</p>
	</li>
	<li class="know_text1">
		<p class="text">翻贝网企业宣传片</p>
		<p class="line"></p>
		<p class="text4">建议在WIFI环境下观看本视频</p>
		<p class="know_video">
			<img class="video_pic1" src="{{env('IMAGE_DOMAIN')}}images/video_pic.jpg?v={{env('IMAGE_VERSION')}}" alt="">
			<img class="video_pic2" src="{{env('IMAGE_DOMAIN')}}images/pc/play.png?v={{env('IMAGE_VERSION')}}" alt="">
			<input type="button" name="" class="fz_48" value="" onclick="playVideo('http://file.fbw-china.com/video/about.mp4')">
		</p>
		<video id="video" controls name="media" poster="{{env('IMAGE_DOMAIN')}}images/video_pic.jpg?v={{env('IMAGE_VERSION')}}">
		 	<source src="http://file.fbw-china.com/video/about.mp4" type='video/mp4'>
		 	您的浏览器不支持video标签~
		</video>
	</li>
</ul>
@endsection

@section('scriptResources')
    @parent
    <script>
	    window.onresize=function(){
		    pagesp();
	    }
	    function playVideo(url){
	    	MobileJS.playVideo(url)
	    }
	    var vid=document.getElementById('video');
	    if(navigator.userAgent=='FBWAndroidApp'){
	    	$(".user_know").css({"margin-top":"0"})
            $('header').hide();
            $(".know_video").show();
        }else{
        	if (navigator.userAgent.indexOf('FBWiOSApp')>0) {
        		$(".user_know").css({"margin-top":"0"})
        		$('header').hide();
        		$("video").show();
        		$(window).unload(function(){
        			vid.pause();
        		})
        	}else{
        		$('header').show();
        		$("video").show();
        	}
            
			// $(".paysu_outer").css({"min-height":paysu_outer_h-pay_sure-1});
			// $(".question_ctn").css({"margin-top":pay_sure+1});
        }
	    $(function(){
			var wh = $(window).height();
			var dh = $(document).height();
			$(".max_pic").height(wh);
	    	var on_off = true;
	    	var bodytop;
	    	$("ul img").click(function(){
	    		if(on_off == true){
	    			bodytop = $("body").scrollTop();
	    			$(".max_pic").show();
					var imgtop=($(window).height()-$(".max_pic img").height())/2;
					$(".max_pic img").css("margin-top",imgtop);
	    			var imgsrc = $(this).attr("src");
	    			$(".max_pic img").attr("src",imgsrc);
	    			$(document.body).css({"overflow":"hidden","height":wh});
	    			$("html").css({"overflow":"hidden","height":wh});
	    			on_off = false;
	    		}
	    		$(".max_pic").click(function(){
	    			$("body").scrollTop(bodytop);
	    			$(".max_pic").hide();
	    			$(document.body).css({"overflow":"visible","height":dh});
	    			$("html").css({"overflow":"visible","height":dh});
	    			on_off = true;
	    		});
	    	})
	    })
    </script>
@endsection